<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery.ztree-2.6.js"></script>
  <script type="text/javascript" src="demoTools.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;

	setting = {
		isSimpleData: true,
		treeNodeKey: "id",
		treeNodeParentKey: "pId",
		fontCss: setFont,
		callback: {
			beforeExpand: function(){return false;},
			beforeCollapse: function(){return false;},
			beforeClick: zTreeOnBeforeClick,
			click: zTreeOnClick
		}
		
	};

	var zNodes =[
  	 	{id:1, pId:0, name:"北京"},
  	 	{id:2, pId:0, name:"天津"},
  	 	{id:3, pId:0, name:"上海"},
  	 	{id:6, pId:0, name:"重庆"},
  	 	{id:4, pId:0, name:"河北省", open:true},
  	 	{id:41, pId:4, name:"石家庄"},
  	 	{id:42, pId:4, name:"保定"},
  	 	{id:43, pId:4, name:"邯郸"},
  	 	{id:44, pId:4, name:"承德"},
  	 	{id:5, pId:0, name:"广东省", open:true},
  	 	{id:51, pId:5, name:"广州"},
  	 	{id:52, pId:5, name:"深圳"},
  	 	{id:53, pId:5, name:"东莞"},
  	 	{id:54, pId:5, name:"佛山"},
  	 	{id:6, pId:0, name:"福建省", open:true},
  	 	{id:61, pId:6, name:"福州"},
  	 	{id:62, pId:6, name:"厦门"},
  	 	{id:63, pId:6, name:"泉州"},
  	 	{id:64, pId:6, name:"三明"}
  	 	
  	 ];

	$(document).ready(function(){
		reloadTree();

		$("body").bind("mousedown", 
			function(event){
				if (!(event.target.id == "menuBtn" || event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) {
					hideMenu();
				}
			});
	});

	function setFont(treeId, treeNode) {
		if (treeNode && treeNode.isParent) {
			return {color: "blue"};
		} else {
			return null;
		}
	}

	function showMenu() {
		var cityObj = $("#citySel");
		var cityOffset = $("#citySel").offset();
		$("#DropdownMenuBackground").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
		
	}
	function hideMenu() {
		$("#DropdownMenuBackground").fadeOut("fast");
	}

	function zTreeOnBeforeClick(treeId, treeNode) {
		var check = (treeNode && !treeNode.isParent);
		if (!check) alert("只能选择城市...");
		return check;
	}
	
	function zTreeOnClick(event, treeId, treeNode) {
		if (treeNode) {
			var cityObj = $("#citySel");
			cityObj.attr("value", treeNode.name);
			hideMenu();
		}
	}

	function reloadTree() {
		hideMenu();
		zTree1 = $("#dropdownMenu").zTree(setting, clone(zNodes));
	}	

  //-->
  </SCRIPT>
 </HEAD>

<BODY>
<center class="headTitle">高级应用演示<span> —— 下拉菜单</span></center>
<TABLE border=0 width="700" class="tb1">
	<TR>
		<TD width=340px align=center valign=top>
			<div class="zTreeDemoBackground">
			<br/>
			&nbsp;&nbsp;城市：<input id="citySel" type="text" readonly value="" style="width:80px;"/>
			&nbsp;<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>
			</div>
		</TD>
		<TD width=360px align=left valign=top>
		<div class="demoContent">
			<li class="title focus">
				<button class="ico star" onfocus="this.blur();"></button>下拉菜单说明
				<ul class="remark">1、菜单注释</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;这是一个简单的下拉菜单例子，与右键菜单一样，仅仅用于功能演示。</li>
					<li>&nbsp;&nbsp;A、点击“选择”即可弹出。</li>
					<li>&nbsp;&nbsp;B、点击页面其他地方，即可隐藏菜单。</li>
					<li>&nbsp;&nbsp;C、尝试点击 省 或 市 看看区别。</li>
				</ul>
				<ul class="remark">2、功能扩展</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;A、如果不想使用JQuery的动画效果，那么可以直接使用show() 和 hide()。</li>
					<li>&nbsp;&nbsp;B、对于菜单的点击规则，完全由你做主，可以随意制定。</li>
					<li>&nbsp;&nbsp;C、菜单的样式、尺寸可以根据你的需求随意调节。</li>
				</ul>
			</li>
			
		</div>	
		</TD>
	</TR>
</TABLE>

<div id="DropdownMenuBackground" style="display:none; position:absolute; height:200px; min-width:150px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
	<ul id="dropdownMenu" class="tree"></ul>
</div>
</BODY>
</HTML>
